<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Row Editing in DataGrid - jQuery EasyUI Demo</title>

    <!--<link rel="stylesheet" type="text/css" href="./libs/jquery/easyui/themes/default/easyui.css">-->
    <!--<link rel="stylesheet" type="text/css" href="./libs/jquery/easyui/themes/icon.css">-->
    <!--<script type="text/javascript" src="./libs/jquery/jquery.min.js"></script>-->
    <!--<script type="text/javascript" src="./libs/jquery/jquery.easyui.min.js"></script>-->

    <link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../lib/jquery-easyui-1.4.2/demo/demo.css">

    <script type="text/javascript" src="../lib/jquery-easyui-1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-easyui-1.4.2/locale/easyui-lang-zh_CN.js"></script>


</head>
<body>
<h2>Row Editing in DataGrid</h2>
<p>Click the row to start editing.</p>
<div style="margin:20px 0;"></div>

<!-- 菜单: 查看盘点数据 -->
<div id="id_menu" class="datagrid-toolbar" style="width:700px;padding:0;margin:0">
    <a href="javascript:void(0)" id="id_showdetail" class="easyui-linkbutton" data-options="iconCls:'icon-tip'">查看盘点数据</a>
    <input id="ss" class="easyui-searchbox" style="width:150px"
           data-options="searcher:qq,prompt:'请输入拼音简码'"/>
</div>
<!-- 修改: 拼音简码检索出来的数据 -->
<div id="id_edit_dg_parent"></div>
<!-- datagrid: 展示数据 -->
<div id="dg"></div>
<!-- datagrid: 页脚 -->
<div id="footer" style='padding-left:200px'>
    <a href="javascript:void(0)" id="id_continue" class="easyui-linkbutton" data-options="width:100">继续</a>
</div>

<script type="text/javascript">
    var his = {};
    //
    var editIndex = undefined;
    //searchbox的查询function
    var qq = function(){

        //先判断是否有数据正在编辑...
        if(!!his.isQueryAndEditing){
            return false;
        }

        //一启动searchbox的查询,就立即给"isQueryAndEditing"赋值.
        his.isQueryAndEditing = true;

        //如果查询到数据就渲染...
        //渲染: 修改建设数据.
        $("#id_edit_dg_parent").append("<div id='id_edit_dg'></div>");
        $("#id_edit_dg").datagrid({
            width: 700,
            height: 'auto',
            title: '',
            iconCls: 'icon-edit',
            rownumbers:true,
            singleSelect: true,
            method: 'get',
            columns: [
                [
                    {field:'ck',checkbox:true},
                    {field:'itemid',title:'Item ID',width:80},
                    {field:'listprice',title:'List Price',width:80,editor:{type:'numberbox',options:{precision:1,required:true}}},
                    {field:'unitcost',title:'Unit Cost',width:80,editor:'numberbox'},
                    {field:'attr1',title:'Attribute',width:250,editor:'textbox'},
                    {field:'status',title:'Status',width:60,editor:{type:'checkbox',options:{on:'P',off:''}}},
                    {field:'isEdit',title:'是否执行过',hidden:true}
                ]
            ],
            toolbar: [
                {
                    iconCls: 'icon-ok',
                    text: '修改完成',
                    handler: function(){
                        //完成后,更新页面数据 或者 ajax更新到后台数据库...
                        //同时,清除 id_edit_dg
                        $("#id_edit_dg_parent").html("");
                        //
                        delete his.isQueryAndEditing;
                    }
                }
            ]
        });
        // *: 本页面数据,直接从复制.否则,ajax获取过来.
        //获取所有的field
        var fields = $("#dg").datagrid('getColumnFields');
        fields.splice(0,1);
        var copyRow = {};
        //获取任意一行的数据.'
        var someRow = $("#dg").datagrid("getRows")[0];
        console.log( someRow['attr1'] );
        //
        $.each(fields, function(i,n){
            if( n == 'isEdit' ){
                copyRow[n] = "Y";
            }else{
                copyRow[n] = someRow[n];
            }
        });
        $("#id_edit_dg").datagrid("insertRow",{
            index: 0,
            row: copyRow
        });
        //立即触发编辑...
        $("#id_edit_dg").datagrid("selectRow", 0).datagrid("beginEdit", 0);
        var ed = $('#id_edit_dg').datagrid('getEditor', {index:0,field:'listprice'});
        ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
        //调用 "endEditing"
        //如果在本页面就更新之, 如果不在本页面就立即发送 ajax 更新后台.

    };



    //渲染: datagrid
    $("#dg").datagrid({
        width: 700,
        height: 'auto',
        title: 'Row Editing in DataGrid',
        iconCls: 'icon-edit',
        rownumbers:true,
        singleSelect: true,
        url: './data/datagrid_data1.json',
        method: 'get',
        columns: [
            [
                {field:'ck',checkbox:true},
                {field:'itemid',title:'Item ID',width:80},
                {field:'listprice',title:'List Price',width:80,editor:{type:'numberbox',options:{precision:1,required:true}}},
                {field:'unitcost',title:'Unit Cost',width:80,editor:'numberbox'},
                {field:'attr1',title:'Attribute',width:250,editor:'textbox'},
                {field:'status',title:'Status',width:60,editor:{type:'checkbox',options:{on:'P',off:''}}},
                {field:'isEdit',title:'是否执行过',hidden:true}
            ]
        ],
        rowStyler: function(index,row){
            if ( !!row.isEdit && row.isEdit == 'Y' ){
                return 'background-color:#6293BB;color:#fff;'; // return inline style
            }
        },
        onClickCell: function (index, field, value) {

            //
            if( endEditing() && index != editIndex ){
                //
                $("#dg").datagrid("selectRow", index).datagrid("beginEdit", index);
                var ed = $('#dg').datagrid('getEditor', {index:index,field:field});
                ($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
                editIndex = index;
                console.log( "editIndex", editIndex );
            }
        },
        footer: "footer"
    });

    var endEditing = function(){
        if (editIndex == undefined){return true}
        if ( $('#dg').datagrid('validateRow', editIndex) ){

            $('#dg').datagrid('endEdit', editIndex);

            //获取所有的field
            var fields = $("#dg").datagrid('getColumnFields');
            fields.splice(0,1);
            var updateRow = {};
            //获得当前选择行的数据.
            var curRecord = $("#dg").datagrid("getSelected");
            //复制数据
            $.each(fields, function(i,n){
                if( n == 'isEdit' ){
                    updateRow[n] = 'Y';
                }else{
                    updateRow[n] = curRecord[n];
                }
            });
            //更新数据,会触发rowStyle函数...
            $("#dg").datagrid('updateRow', {
                index: editIndex,
                row: updateRow
            });

            editIndex = undefined;
            return true;
        }else{
            return false;
        }
    };
</script>
</body>
</html>